<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      .disc {
        position: relative;
        margin: 200px auto;
        width: 300px;
        height: 300px;
        border: 1px solid #000;
        border-radius: 50%;
      }

      .axis {
        position: absolute;
        top: 150px;
        left: 150px;
        transform: translate(-50%, -50%);
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #000;
      }

      .hourHand {
        position: absolute;
        top: 150px;
        left: 147px;
        width: 6px;
        height: 80px;
        background-color: #000;
        transform-origin: 3px 0;
      }

      .minuteHand {
        position: absolute;
        top: 150px;
        left: 148px;
        width: 4px;
        height: 110px;
        background-color: #000;
        transform-origin: 2px 0;
      }

      .secondHand {
        position: absolute;
        top: 150px;
        left: 149px;
        width: 2px;
        height: 130px;
        background-color: #000;
        transform-origin: 1px 0;
      }

      .scale {
        position: absolute;
        top: 0;
        left: 150px;
        transform-origin: 2.5px 150px;
        width: 2px;
        height: 5px;
        background-color: #000;
      }

      .num {
        position: absolute;
        top: 15px;
        left: 150px;
        width: 20px;
        height: 20px;
        color: 16px;
        text-align: center;
        line-height: 20px;
        transform-origin: 50% 135px;
      }

      .num span {
        display: block;
        transform-origin: 50% 50%;
      }
    </style>
  </head>
  <body>
    <div class="disc">
      <div class="axis"></div>
      <div class="hourHand"></div>
      <div class="minuteHand"></div>
      <div class="secondHand"></div>
    </div>
    <script>
      // 获取元素
      var disc = document.getElementsByClassName("disc")[0];
      var hourHand = document.getElementsByClassName("hourHand")[0];
      var minuteHand = document.getElementsByClassName("minuteHand")[0];
      var secondHand = document.getElementsByClassName("secondHand")[0];
      var scale = document.getElementsByClassName("scale");

      // 生成刻度
      for (var i = 0; i < 60; i++) {
        var scale = document.createElement("div");
        scale.classList.add("scale");
        scale.style.transform = `translate(-50%) rotate(${i * 6}deg)`;
        disc.appendChild(scale);
        scale.style.transform = `translate(-50%) rotate(${i * 6}deg)`;
        if (i % 5 === 0) {
          scale.style.width = 4 + "px";
          scale.style.height = 12 + "px";
        }
      }

      // 生成数字
      for (var i = 0; i < 12; i++) {
        var num = document.createElement("div");
        var numx = document.createElement("span");
        num.classList.add("num");
        num.style.transform = `translate(-50%) rotate(${i * 30 + 30}deg)`;
        numx.style.transform = `rotate(${-i * 30 - 30}deg)`;
        numx.innerHTML = i + 1;
        disc.appendChild(num);
        num.appendChild(numx);
      }

      // 浏览器刚打开就显示，不会停顿
      var h = getTime().hours;
      h = h > 12 ? h - 12 : h;
      hourHand.style.transform = `rotate(${
        h * 30 - 180 + getTime().minute * 0.5
      }deg)`;
      minuteHand.style.transform = `rotate(${getTime().minute * 6 - 180}deg)`;
      secondHand.style.transform = `rotate(${getTime().second * 6 - 180}deg)`;

      // 定时器，每过一秒执行一次
      setInterval(function () {
        var h = getTime().hours;
        h = h > 12 ? h - 12 : h;
        hourHand.style.transform = `rotate(${
          h * 30 - 180 + getTime().minute * 0.5
        }deg)`;
        minuteHand.style.transform = `rotate(${getTime().minute * 6 - 180}deg)`;
        secondHand.style.transform = `rotate(${getTime().second * 6 - 180}deg)`;
      }, 1000);

      // 函数：获取时间
      function getTime() {
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth();
        month = month < 10 ? "0" + month : month;
        var day = date.getDate();
        day = day < 10 ? "0" + day : day;
        var week = date.getDay();
        var weeks = ["日", "一", "二", "三", "四", "五", "六"];
        var weekZn = weeks[week];
        var hou = date.getHours();
        hou = hou < 10 ? "0" + hou : hou;
        var min = date.getMinutes();
        min = min < 10 ? "0" + min : min;
        var sec = date.getSeconds();
        sec = sec < 10 ? "0" + sec : sec;
        return {
          year: year,
          month: month,
          day: day,
          week: weekZn,
          hours: hou,
          minute: min,
          second: sec,
        };
      }
    </script>
  </body>
</html>
